<template>
  <div class="center-page">
    <!-- 顶部导航栏 -->
    <div class="top-nav" :class="{ visible: isTopNavVisible }" :style="{ opacity: topNavOpacity }">
      <div class="top-nav-left">
        <img class="top-nav-avatar" :src="require('@/assets/images/center/default_user_avatar.png')" alt="用户头像">
        <span class="top-nav-username">php技术战</span>
      </div>
      <div class="top-nav-right">
        <a href="https://passport.goofish.com/mini_login.htm?appName=xianyu&appEntrance=web&isMobile=true&redirectType=redirect&returnUrl=https%3A%2F%2Falimebot.goofish.com%2Fintl%2Findex.htm%3Ffrom%3DbUGDQc8Rdx%26attemptquery%3Dattemptquery%26titleVisible%3Dfalse"><img class="top-nav-icon1" :src="require('@/assets/images/center/tubiao2.jpg')" alt="帮助与客服"></a>
        <img class="top-nav-icon" :src="require('@/assets/images/center/fic_navibar_setting@3x.webp')" alt="设置">
      </div>
    </div>

    <!-- 主内容区域 -->
    <div class="main-content">
      <!-- 用户信息头部 -->
      <div class="user-header">
        <div class="user-info">
          <img class="user-avatar" :src="require('@/assets/images/center/default_user_avatar.png')" alt="用户头像">
          <div class="user-details">
            <div class="username">php技术战</div>
            <div class="fish-power">鱼力值690</div>
          </div>
          <div class="header-actions">
            <a href="https://passport.goofish.com/mini_login.htm?appName=xianyu&appEntrance=web&isMobile=true&redirectType=redirect&returnUrl=https%3A%2F%2Falimebot.goofish.com%2Fintl%2Findex.htm%3Ffrom%3DbUGDQc8Rdx%26attemptquery%3Dattemptquery%26titleVisible%3Dfalse" class="action-item2">
              <img class="action-icon1" :src="require('@/assets/images/center/xiaomi.webp')" style="width: 50px;height: 50px;" alt="帮助与客服">
              <span class="action-text">帮助与客服</span>
            </a>
            <a href="#" class="action-item">
              <img class="action-icon" :src="require('@/assets/images/center/fic_navibar_setting@3x.webp')" alt="设置">
              <span class="action-text">设置</span>
            </a>
          </div>
        </div>
      </div>

      <!-- 会员横幅 -->
      <div class="membership-banner">
        <div class="membership-content">
          <div class="membership-title">
            <img :src="require('@/assets/images/center/闲鱼会员.png')" style="background: transparent;" alt="闲鱼会员">
            <img :src="require('@/assets/images/center/X6.png')" alt="X5">
          </div>
          <div class="membership-desc">记得每日来领经验值,更大权益礼包等你拿</div>
        </div>
        <img class="membership-mascot" :src="require('@/assets/images/center/小黄鸭.gif')" alt="会员吉祥物">
      </div>

      <!-- 数据统计 -->
      <div class="stats-section">
        <div class="stat-item">
          <a href="https://h5.m.goofish.com/app/idleFish-F2e/fun-circles/circle?wh_weex=true&currentTab=myCircle">
             <div class="stat-number">1</div>
             <div class="stat-label">我的收藏</div>
          </a>
         
        </div>
        <div class="stat-item">
          <div class="stat-number">63</div>
          <div class="stat-label">历史浏览</div>
        </div>
        <div class="stat-item">
          <div class="stat-number">0</div>
          <div class="stat-label">我的关注</div>
        </div>
        <div class="stat-item">
          <a href="https://h5.m.goofish.com/wow/moyu/moyu-project/fun-groups-topic-event-center/pages/eventHome">
            <div class="stat-number">0</div>
            <div class="stat-label">红包卡券</div>
          </a>
          
        </div>
      </div>

      <!-- TIPS横幅 -->
      <div class="tips-banner">
        <div class="tips-keywords-container" id="tipsKeywordsContainer">
          <div class="tips-keyword" :class="{ 
            active: currentTipIndex === index,
            'slide-out': previousTipIndex === index && currentTipIndex !== index
          }" v-for="(tip, index) in tips" :key="index">
            <div class="tips-tag">
              <img :src="require('@/assets/images/center/上新.png')" alt="上新">
            </div>
            <span class="tips-text">{{ tip.text }}</span>
            <img class="tips-tao-icon" :src="require('@/assets/images/center/aliuser_logo_tao.png')" alt="淘"> 
            <div class="tips-arrow">
              <img :src="require('@/assets/images/center/my_coin_arrow.png')" style="width: 10px;height: 10px;position: relative;bottom: 0px;right: 15px;" alt="箭头">
            </div>
          </div>
        </div>
      </div>

      <!-- 我的交易 -->
      <div class="transactions-section">
        <div class="section-header">
          <div class="section-title">我的交易</div>
          <div class="section-subtitle">在闲鱼赚了91.48元</div>
        </div>
        <div class="transactions-grid">
          <div class="transaction-item">
            <a href="https://h5.m.goofish.com/cea/idleFish-F2e/dlefish-my-publish-mix/pages/mainsecond?kun=true&loadingVisible=false&titleVisible=false">
                <img class="transaction-icon" :src="require('@/assets/images/center/我发布的.png')" alt="我发布的">
                <div class="transaction-label">我发布的22</div>
            </a>
          </div>
          <div class="transaction-item">
            <img class="transaction-icon" :src="require('@/assets/images/center/我卖出的.png')" alt="我卖出的">
            <div class="transaction-label">我卖出的18</div>
          </div>
          <div class="transaction-item">
            <img class="transaction-icon" :src="require('@/assets/images/center/我买到的.png')" alt="我买到的">
            <div class="transaction-label">我买到的21</div>
          </div>
          <div class="transaction-item">
            <img class="transaction-icon" :src="require('@/assets/images/center/待评价.png')" alt="待评价">
            <div class="transaction-label">待评价</div>
          </div>
        </div>
      </div>

      <!-- 功能快捷方式 -->
      <div class="shortcuts-section">
        <div class="shortcuts-container" ref="shortcutsContainer">
          <!-- 第一页 -->
          <div class="shortcuts-page">
            <div class="shortcut-item" v-for="(item, index) in shortcutsPage1" :key="index">
              <div class="shortcut-icon">
                <a :href="item.url"><img :src="item.icon" :alt="item.name"></a>
              </div>
              <div class="shortcut-label">{{ item.name }}</div>
            </div>
          </div>
          <!-- 第二页 -->
          <div class="shortcuts-page">
            <div class="shortcut-item" v-for="(item, index) in shortcutsPage2" :key="index">
              <div class="shortcut-icon">
                <a :href="item.url"><img :src="item.icon" :alt="item.name"></a>
              </div>
              <div class="shortcut-label">{{ item.name }}</div>
            </div>
          </div>
        </div>
        <!-- 翻页指示器 -->
        <div class="page-indicators">
          <div class="page-indicator" :class="{ active: currentShortcutPage === 0 }" @click="switchShortcutPage(0)"></div>
          <div class="page-indicator" :class="{ active: currentShortcutPage === 1 }" @click="switchShortcutPage(1)"></div>
        </div>
      </div>

      <!-- 功能网格 -->
      <div class="features-grid">
        <!-- 第一列：闲鱼币（大卡片，跨2行） -->
        <div class="feature-card large" style="position: relative;">
          <a href="https://market.m.taobao.com/app/idleFish-F2e/idlefish-xycoin/pages/index?wh_weex=true&needLogin=true&qq-pf-to=pcqq.c2c"><img class="feature-image" :src="require('@/assets/images/center/闲鱼币.gif')" alt="闲鱼币">
          <div style="position: absolute; top: 14px; left: 70px; z-index: 10; background: #FB9813; border-radius: 256px; padding: 1px 4px; height: 20px; display: flex; align-items: center;">
            <img :src="require('@/assets/images/center/闲鱼币摇头.gif')" alt="闲鱼币摇头" style="width: 12px; height: 12px; margin-right: 3px;">
            <span style="color: #fff; font-size: 12px; font-weight: bold;">612</span>
            <img :src="require('@/assets/images/center/my_coin_arrow.png')" alt="箭头" style="width: 8px; height: 8px; margin-left: 2px; filter: brightness(0) invert(1);">
          </div></a>
        </div>
        
        <!-- 第二列：循环商店 -->
        <div class="feature-card">
          <img class="feature-image" :src="require('@/assets/images/center/循环商店.gif')" alt="循环商店">
        </div>
        
        <!-- 第三列：神奇鱼塘 -->
        <div class="feature-card">
          <img class="feature-image" :src="require('@/assets/images/center/神奇鱼塘.gif')" alt="神奇鱼塘">
        </div>
        
        <!-- 第二列：小法庭 -->
        <div class="feature-card">
          <img class="feature-image" :src="require('@/assets/images/center/小法庭.gif')" alt="小法庭">
        </div>
        
        <!-- 第三列：公益宝贝 -->
        <div class="feature-card">
          <img class="feature-image" :src="require('@/assets/images/center/公益宝贝.gif')" alt="公益宝贝">
        </div>
      </div>

      <!-- 功能网格2 - 2列布局 -->
      <div class="features-grid-2">
        <div class="feature-card">
          <img class="feature-image" :src="require('@/assets/images/center/现金签到.png')" alt="现金签到">
        </div>
        <div class="feature-card">
          <img class="feature-image" :src="require('@/assets/images/center/闲鱼赚钱.png')" alt="闲鱼赚钱">
        </div>
        <div class="feature-card">
          <img class="feature-image" :src="require('@/assets/images/center/皮肤装扮.png')" alt="皮肤装扮">
        </div>
        <div class="feature-card">
          <img class="feature-image" :src="require('@/assets/images/center/闲鱼给物社.png')" alt="闲鱼给物社">
        </div>
        <div class="feature-card">
          <img class="feature-image" :src="require('@/assets/images/center/群推广官.png')" alt="群推广官">
        </div>
        <div class="feature-card">
          <img class="feature-image" :src="require('@/assets/images/center/闲鱼直播.png')" alt="闲鱼直播">
        </div>
        <div class="feature-card">
          <img class="feature-image" :src="require('@/assets/images/center/兴趣圈.png')" alt="兴趣圈">
        </div>
        <div class="feature-card">
          <img class="feature-image" :src="require('@/assets/images/center/闲鱼联盟.png')" alt="闲鱼联盟">
        </div>
        <div class="feature-card">
          <img class="feature-image" :src="require('@/assets/images/center/本机估价.png')" alt="本机估价">
        </div>
        <div class="feature-card">
          <img class="feature-image" :src="require('@/assets/images/center/闲鱼公约.png')" alt="闲鱼公约">
        </div>
      </div>
    </div>

    <!-- 底部导航 -->
    <BottomNav />
  </div>
</template>

<script>
import BottomNav from './BottomNav.vue';

export default {
  name: 'CenterPage',
  components: {
    BottomNav
  },
  data() {
    return {
      isTopNavVisible: true,
      topNavOpacity: 0,
      lastScrollTop: 0,
      scrollCheckInterval: null,
      currentTipIndex: 0,
      previousTipIndex: -1,
      currentShortcutPage: 0,
      tips: [
        { text: '淘宝买的宝贝快去看看还值多少钱' },
        { text: '闲鱼买的宝贝快去看看还值多少钱' },
        { text: 'Python编程入门教程' },
        { text: '二手显卡超值购买指南' },
        { text: '数据分析实战教程推荐' }
      ],
      shortcutsPage1: [
        { name: '超级擦亮', icon: require('@/assets/images/center/超级擦亮.png'),url:'https://h5.m.goofish.com/app/idleFish-F2e/business-user-backend/welcome'},
        { name: '淘宝转卖', icon: require('@/assets/images/center/淘宝转卖.png'),url:'https://h5.m.goofish.com/wow/moyu/moyu-project/moyu-tb-resell/pages/newResell?isNeedRefresh=0&setTab=1&mypage_resell' },
        { name: '借钱', icon: require('@/assets/images/center/借钱.png') },
        { name: '帖子中心', icon: require('@/assets/images/center/帖子中心.png'),url:'https://h5.m.goofish.com/cea/idleFish-F2e/creator-pha/mypost' }
      ],
      shortcutsPage2: [
        { name: '神奇副业', icon: require('@/assets/images/center/神奇副业.png') },
        { name: '闲鱼公约', icon: require('@/assets/images/center/闲鱼公约（横）.png') ,url:'https://h5.m.goofish.com/app/msd/buyer-aqcenter/index.html?source=316#/notice'},
        { name: '闲鱼体验官', icon: require('@/assets/images/center/闲鱼体验官.png') ,url:'https://h5.m.goofish.com/app/idleFish-F2e/xy-account-pro-open/pages/BusinessJoin?wh_weex=true&prefetch=%7B%22api%22%3A%22mtop.taobao.idle.playboy.pro.query%22%2C%22v%22%3A%221.0%22%2C%22params%22%3A%7B%7D%7D'},
        { name: '安全中心', icon: require('@/assets/images/center/安全中心.png') ,url:'https://h5.m.goofish.com/app/msd/buyer-aqcenter/index.html?source=316#/'}
      ]
    };
  },
  mounted() {
    // 监听滚动事件来控制顶部导航的显示
    // 尝试多种滚动事件监听方式
    window.addEventListener('scroll', this.handleScroll, true); // 使用捕获模式
    document.addEventListener('scroll', this.handleScroll, true);
    
    // 使用 passive 选项优化性能
    window.addEventListener('scroll', this.handleScroll, { passive: true });
    document.addEventListener('scroll', this.handleScroll, { passive: true });
    
    // 也监听组件根元素的滚动
    const centerPage = this.$el;
    if (centerPage) {
      centerPage.addEventListener('scroll', this.handleScroll);
    }
    
    // 使用轮询检测滚动位置
    this.scrollCheckInterval = setInterval(() => {
      // 尝试从多个位置获取 scrollTop
      const scrollTop = window.pageYOffset || 
                       document.documentElement.scrollTop || 
                       document.body.scrollTop ||
                       (this.$el ? this.$el.scrollTop : 0);
      
      if (scrollTop !== this.lastScrollTop) {
        this.lastScrollTop = scrollTop;
        this.handleScrollWithValue(scrollTop);
      }
    }, 100);
    
    // 初始化TIPS关键词轮播
    this.initTipsKeywordsRotation();
    // 初始化触摸滑动支持
    this.initTouchEvents();
    
    // 初始化时调用一次
    this.$nextTick(() => {
      this.handleScroll();
    });
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
    document.removeEventListener('scroll', this.handleScroll);
    
    const centerPage = this.$el;
    if (centerPage) {
      centerPage.removeEventListener('scroll', this.handleScroll);
    }
    
    if (this.scrollCheckInterval) {
      clearInterval(this.scrollCheckInterval);
    }
    
    if (this.tipsTimer) {
      clearInterval(this.tipsTimer);
    }
  },
  methods: {
    handleScroll(event) {
      // 尝试从事件目标获取 scrollTop
      let scrollTop = 0;
      if (event && event.target) {
        scrollTop = event.target.scrollTop || 0;
      }
      
      // 如果事件没有提供，尝试其他方式
      if (scrollTop === 0) {
        scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
      }
      
      this.handleScrollWithValue(scrollTop);
    },
    handleScrollWithValue(scrollTop) {
      // 0-20px 之间透明度渐变，超过20px完全显示
      this.isTopNavVisible = true;
      
      if (scrollTop <= 0) {
        // 在顶部，完全隐藏
        this.topNavOpacity = 0;
      } else if (scrollTop >= 20) {
        // 超过20px，完全显示
        this.topNavOpacity = 1;
      } else {
        // 0-20px 之间，线性渐变
        this.topNavOpacity = scrollTop / 20;
      }
    },
    initTipsKeywordsRotation() {
      this.tipsTimer = setInterval(() => {
        this.previousTipIndex = this.currentTipIndex;
        this.currentTipIndex = (this.currentTipIndex + 1) % this.tips.length;
      }, 3000);
    },
    switchShortcutPage(page) {
      this.currentShortcutPage = page;
      const container = this.$refs.shortcutsContainer;
      if (container) {
        const translateX = -page * 50;
        container.style.transform = `translateX(${translateX}%)`;
      }
    },
    initTouchEvents() {
      const container = this.$refs.shortcutsContainer;
      if (!container) return;

      let startX = 0;
      let isDragging = false;

      container.addEventListener('touchstart', (e) => {
        startX = e.touches[0].clientX;
        isDragging = true;
      });

      container.addEventListener('touchmove', (e) => {
        if (!isDragging) return;
        e.preventDefault();
      });

      container.addEventListener('touchend', (e) => {
        if (!isDragging) return;
        isDragging = false;
        
        const endX = e.changedTouches[0].clientX;
        const diffX = startX - endX;
        
        if (Math.abs(diffX) > 50) { // 滑动距离超过50px才切换
          if (diffX > 0 && this.currentShortcutPage < 1) {
            this.switchShortcutPage(this.currentShortcutPage + 1);
          } else if (diffX < 0 && this.currentShortcutPage > 0) {
            this.switchShortcutPage(this.currentShortcutPage - 1);
          }
        }
      });
    }
  }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: #f5f5f5;
  color: #333;
  line-height: 1.4;
}
a, button, img, div[role="button"] {
  outline: none; /* 移除焦点轮廓 */
  -webkit-tap-highlight-color: transparent; /* 移除移动端点击时的背景（适配 Safari/Chrome） */
}
.center-page {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: #f5f5f5;
  color: #333;
  line-height: 1.4;
  padding-bottom: 60px;
}

/* 顶部导航栏 */
.top-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.top-nav.visible { 
  opacity: 1; 
}

.top-nav-left {
  display: flex;
  align-items: center;
}

.top-nav-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin-right: 12px;
}

.top-nav-username {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.top-nav-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.top-nav-icon {
  width: 24px;
  height: 24px;
  position: relative;
}

.top-nav-icon1 {
  width: 24px;
  height: 24px;
  position: relative;
  right: 15px;
}

/* 主内容区域 */
.main-content {
  margin-top: 0;
  padding: 0 8px 80px;
}

/* 用户信息头部 */
.user-header {
  padding: 8px 8px 0px;
  color: #333;
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.user-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 12px;
  border: 3px solid rgba(255,255,255,0.3);
}

.user-details {
  flex: 1;
}

.username {
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  margin-bottom: -7px;
  color: #333;
}

.username::after {
  content: '';
  margin-left: 4px;
  width: 12px;
  height: 12px;
  background-image: url('~@/assets/images/center/my_coin_arrow.png');
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
}

.fish-power {
  font-size: 10px;
  color: #333;
  display: inline-flex;
  align-items: center;
  background-color: #EFEFEF;
  padding: 2px 2px;
  border-radius: 15px;
  margin-top: 10px;
  border: 1px solid #d4edda;
  font-weight: 700;
}

.fish-power::after {
  content: '';
  margin-left: 2px;
  width: 8px;
  height: 8px;
  background-image: url('~@/assets/images/center/my_coin_arrow.png');
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
}

.header-actions {
  display: flex;
  flex-direction: row;
  gap: 20px;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #666;
  position: relative;
  top: 10px;
}

.action-item2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #666;
  position: relative;
  top: -2px;
}

.action-icon {
  width: 24px;
  height: 24px;
  margin-bottom: 4px;
}

.action-icon1 {
  width: 24px;
  height: 24px;
  margin-bottom: -10px;
}

.action-text {
  font-size: 12px;
  position: relative;
  font-size: 0.6rem;
}

/* 会员横幅 */
.membership-banner {
  background: linear-gradient(to bottom, #C1FCC2, #DCFEE4);
  padding: 15px;
  border-radius: 12px 12px 0 0;
  display: flex;
  margin: 0 0px;
  align-items: center;
  position: relative;
  z-index: 10;
  height: 60px;
  overflow: visible;
}

.membership-content {
  flex: 1;
}

.membership-title {
  font-size: 18px;
  font-weight: 600;
  color: #2E7D32;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.membership-title img {
  height: 20px;
}

.membership-desc {
  font-size: 11px;
  color: #4CAF50;
  display: flex;
  align-items: center;
}

.membership-desc::after {
  content: '';
  margin-left: 2px;
  width: 8px;
  height: 8px;
  background-image: url('~@/assets/images/center/my_coin_arrow.png');
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
  color: #4CAF50;
}

.membership-mascot {
  width: 130px;
  height: 130px;
  object-fit: contain;
  position: relative;
  left: 20px;
}

/* 数据统计 */
.stats-section {
  background: white;
  margin: 0 0px 8px;
  padding: 16px;
  border-radius: 12px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  z-index: 999;
  position: relative;
}

/* 上新提示 */
.tips-section {
  position: absolute;
  top: -10px;
  right: 16px;
  background: white;
  padding: 8px 12px;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 10;
}

.tips-icon {
  width: 16px;
  height: 16px;
}

.tips-text {
  font-size: 12px;
  color: #FF6B35;
  font-weight: 500;
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: 20px;
  font-weight: 700;
  color: #333;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 12px;
  color: #000;
  font-weight: 700;
}

/* TIPS横幅 */
.tips-banner {
  background: white;
  margin: 8px 0px;
  padding: 7px 1px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.tips-keywords-container {
  position: relative;
  flex: 1;
  height: 26px;
  overflow: hidden;
}

.tips-keyword {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 12px;
  color: #000;
  line-height: 26px;
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  height: 26px;
  overflow: hidden;
}

.tips-keyword.slide-out {
  transform: translateY(-100%);
  opacity: 0;
}

.tips-keyword.active {
  transform: translateY(0);
  opacity: 1;
}

.tips-tag {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tips-tag img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  position: relative;
  left: 15px;
}

.tips-text {
  flex: 1;
  font-size: 12px;
  color: #000;
  position: relative;
  left: 35px;
}

.tips-tao-icon {
  height: 20px;
  width: auto;
  left: -30px;
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.tips-arrow img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 我的交易 */
.transactions-section {
  background: white;
  margin: 0 0px 8px;
  padding: 16px;
  border-radius: 12px;
}

.section-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 12px;
  gap: 8px;
}

.section-title {
  font-size: 16px;
  font-weight: 700;
  color: #000;
}

.section-subtitle {
  font-size: 12px;
  color: #999;
}

.transactions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.transaction-item {
  text-align: center;
}

.transaction-icon {
  width: 32px;
  height: 32px;
  margin: 0 auto 8px;
}

.transaction-label {
  font-size: 12px;
  color: #000;
  font-weight: 700;
}

/* 功能快捷方式 */
.shortcuts-section {
  background: white;
  margin: 0 0px 8px;
  padding: 16px;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}

.shortcuts-container {
  display: flex;
  width: 200%;
  transition: transform 0.3s ease;
}

.shortcuts-page {
  width: 50%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  flex-shrink: 0;
}

.shortcut-item {
  text-align: center;
}

.shortcut-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  margin: 0 auto 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: white;
  font-weight: 600;
  background: transparent;
}

.shortcut-icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.shortcut-label {
  font-size: 12px;
  color: #000;
  font-weight: 700;
}

/* 翻页指示器 */
.page-indicators {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

.page-indicator {
  width: 12px;
  height: 2px;
  border-radius: 1.5px;
  background: #ddd;
  cursor: pointer;
  transition: background 0.3s ease;
  margin: 0 1px;
}

.page-indicator.active {
  background: #FFC107;
}

/* 功能网格 */
.features-grid {
  margin: 0 0px 8px;
  display: grid;
  grid-template-columns: 1.6fr 1.1fr 1.1fr;
  gap: 6px;
}

.feature-card.large {
  grid-row: span 2;
}

.feature-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  min-height: 80px;
}

.feature-image {
  width: 100%;
  height: 100%;
  display: block;
}

/* 功能网格2 - 2列布局 */
.features-grid-2 {
  margin: 0 0px 8px;
  display: grid;
  grid-template-columns: 1.1fr 1.1fr;
  gap: 6px;
}
</style>


